<template>
  <div class="page">
    <h2 class="title">传递数组</h2>
    <demo1 :num="num"></demo1>
    <h2 class="title">数组形式列出props</h2>
    <demo2-arr :num="num" :str="str" :arr="arr"></demo2-arr>
    <h2 class="title">对象形式列出props</h2>
    <demo3-obj :num="num" :str="str" :arr="arr" :obj="obj"></demo3-obj>
    <h2 class="title">props校验</h2>
    <demo4 :num="num" :isShow="isShow" :age="age" :strType="strType"></demo4>
    <h2 class="title">单项数据流</h2>
    <demo5 :str="str" :strType="strType"></demo5>
  </div>
</template>

<script>
import Demo1 from './components/demo1'
import Demo2Arr from './components/demo2arr'
import Demo3Obj from './components/demo3obj'
import Demo4 from './components/demo4'
import Demo5 from './components/demo5'
export default {
  components: {
    Demo1,
    Demo2Arr,
    Demo3Obj,
    Demo4,
    Demo5
  },
  data () {
    return {
      num: 25,
      str: 'haiyang',
      isShow: false,
      arr: ['list1', 'list2', 'list3', 'list4'],
      obj: {
        name: 'haiyang',
        age: 25
      },
      age: 22,
      strType: 'success'
    }
  }
}
</script>

<style scoped lang="scss">
.title {
  line-height: 50px;
  font-weight: 600;
}
</style>
